---
section: Sizing
title: Max-Width
slug: /docs/max-width/
order: 2
---

# Max-Width

Utilities for setting the maximum width of an element

<carbon-ad />

| React props       | CSS Properties       |
| ----------------- | -------------------- |
| `maxWidth={size}` | `max-width: {size};` |
| `maxW={size}`     | `max-width: {size};` |

## Scaled Max-Width

All values specified in the `sizes` theme section are automatically applied. Note there is a little difference for scales between `0` and `1` due to conflicting with fluid range. You have to add a suffix `s` to target values from theme, like `0.5` becomes `0.5s` and `1` becomes `1s`.

```jsx preview color=light-blue
<>
  <template preview>
    <x.div display="flex" flexDirection="column" spaceY={4} mx="auto" w={64}>
      {['1s', 8, 12, 16, 24].map((v) => (
        <x.div key={v} display="flex" alignItems="center" spaceX={4}>
          <x.p fontSize="sm" color="light-blue-600" w={24} textAlign="right">
            maxWidth={v}
          </x.p>
          <x.div
            w={32}
            bg="cool-gray-300"
            borderRadius="md"
            display="flex"
            alignItems="flex-end"
          >
            <x.div
              h={8}
              maxWidth={v}
              w={1}
              borderRadius="md"
              bg="light-blue-500"
              color="white"
              fontSize="2xl"
              fontWeight="extrabold"
            />
          </x.div>
        </x.div>
      ))}
    </x.div>
  </template>
  <x.div>
    <x.div maxWidth="1s" w={32} />
    <x.div maxWidth={8} w={32} />
    <x.div maxWidth={12} w={32} />
    <x.div maxWidth={16} w={32} />
    <x.div maxWidth={24} w={32} />
  </x.div>
</>
```

## Fixed Max-Width

Any valid value is accepted in width, numbers are converted to `px`, other units have to be specified.

```jsx preview color=emerald
<>
  <template preview>
    <x.div display="flex" flexDirection="column" spaceY={4} mx="auto" w={64}>
      {[110, '12px', '4rem', '3ex'].map((v) => (
        <x.div key={v} display="flex" alignItems="center" spaceX={4}>
          <x.p fontSize="sm" color="emerald-600" w={24} textAlign="right">
            maxWidth={v}
          </x.p>
          <x.div
            w={32}
            bg="cool-gray-300"
            borderRadius="md"
            display="flex"
            alignItems="flex-end"
          >
            <x.div
              h={8}
              maxWidth={v}
              w={1}
              borderRadius="md"
              bg="emerald-500"
              color="white"
              fontSize="2xl"
              fontWeight="extrabold"
            />
          </x.div>
        </x.div>
      ))}
    </x.div>
  </template>
  <x.div>
    <x.div maxWidth={110} w={32} />
    <x.div maxWidth="12px" w={32} />
    <x.div maxWidth="4rem" w={32} />
    <x.div maxWidth="3ex" w={32} />
  </x.div>
</>
```

## Fluid Max-Width

Values from `0` to `1` are converted into percentages. As a fraction or a number, both are an expression. Of course specifying `[value]%` is also possible.

```jsx preview color=rose
<>
  <template preview>
    <x.div spaceY={6}>
      <x.div
        display="flex"
        overflow="hidden"
        borderRadius="md"
        color="white"
        fontFamily="mono"
        bg="cool-gray-300"
      >
        <x.div w={0.3} px={2} py={4} bg="rose-500" textAlign="center">
          0.3
        </x.div>
      </x.div>
      <x.div
        display="flex"
        overflow="hidden"
        borderRadius="md"
        color="white"
        fontFamily="mono"
        bg="cool-gray-300"
      >
        <x.div w={0.5} px={2} py={4} bg="rose-500" textAlign="center">
          0.5
        </x.div>
        <x.div w={0.2} px={2} py={4} bg="cool-gray-500" textAlign="center">
          0.2
        </x.div>
      </x.div>
    </x.div>
  </template>
  <x.div maxWidth={1 / 2} w={0.3}>
    maxWidth=1/2
  </x.div>
  <x.div maxWidth={0.5} w={0.7}>
    maxWidth=0.5
  </x.div>
</>
```

## Responsive

To control the margin of an element at a specific breakpoint, use responsive object notation. For example, adding the property `maxWidth={{ md: 1 }}` to an element would apply the `maxWidth={1}` utility at medium screen sizes and above.

```jsx
<x.div maxWidth={{ xs: 1 / 2, md: 1 }} />
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.

## Customizing

### Sizes scale

f you'd like to customize your values for width, height, min-width, min-height, max-width, max-height, all at once, use the `theme.sizes` section of your theme.

```diffjs
  // theme.js
  export const theme = {
    sizes: {
+     sm: '8px',
+     md: '16px',
+     lg: '24px',
+     xl: '48px',
    },
  }
```

Learn more about customizing the default theme in the [theme customization documentation](/docs/theme/).
